<template>
  <view>
  <scroll-view scroll-y="true"  :style="{height: contentHeight + 'px'}" @scrolltolower="queryData">
    <view v-for="(item,index) in lists" :key="index" class="bgc">
    <h6 class="title">{{item.goodsName}}</h6>
    <view class="j-content-between flex pd ">
				
				<view><text>商品编码:</text>{{ item.goodsCode }}</view>
				<view><text>商品条码:</text>{{ item.barcode }}</view>
	</view>
    <view class="j-content-between flex pd">
				<view><text>商品箱数:</text>{{ item.boxCount }}</view>
				<view><text>商品零数:</text>{{ item.boxNum }}</view>
	</view>
    <view class="j-content-between flex pd">
				<view><text>金额:￥</text>{{ item.acceptTaxAmount }}</view>
				<view><text>单价:￥</text>{{ item.taxPrice }}</view>
	</view>
    <view class="j-content-between flex pd">
				<view><text>备注：</text>{{ item.remark }}</view>
	</view>
  </view>
  <end-temp v-show="end"></end-temp>
  </scroll-view>
  <bottom-Box class="bottom  ">
    <view class="bgc flex pds">
    <view style="width: 50%; text-align: center;">
      <view>总金额</view>
      <view>{{ summary.acceptTaxAmount }}</view>
    </view>
    <view style="width: 50%; text-align: center;">
      <view>总箱数</view>
      <view>{{ summary.acceptBoxNum}}</view>
    </view>
    <view style="width: 50%; text-align: center;">
      <view>总零数</view>
      <view>{{ summary.acceptMainNum}}</view>
    </view>
  </view>
  </bottom-Box>
  </view>
</template>

<script>
import { getScreen} from "../../service/auth";
import { detail } from "../../service/api/orderquery";
import endTemp from "../../components/endTemp";
export default {
  components:{endTemp},
    name:'detail',
    data() {
        return {
          id:'',
          page:1,
          size:20,
            lists:[],
            summary:{},
            end:false,
            contentHeight:0
        }
    },
    created() {
    const {width,height} = getScreen()
    this.contentHeight = height - (100 * width / 750)
  },
    onLoad(option) {
    this.id=option.id
    this.onlist()
},
methods: {
  onlist(){
    detail({
      id:this.id,
      page:this.page,size:this.size}).then(res=>{
        if (res.data.content.length<this.size) 
        this.end=true

        this.lists=this.lists.concat(res.data.content)
        this.summary=res.data.summary
    })
  },
  queryData(){
      if(this.end)return
      this.page++
      this.onlist()
    },
},
}
</script>

<style lang="scss">
page{
  background-color: #f6f7f7;
  .bgc{
    background-color: white;
    margin: 15rpx;
    border-radius: 20rpx;
    .title{
  margin: 15rpx 20rpx;
    padding: 15rpx 0;
    border-bottom: 1rpx #f5f2f2 solid;
    font-weight: bold;
    font-size: 35rpx;
}
.pd {
	padding: 5rpx 20rpx;
  color: grey;
	}
  }
  .bottom{
  background-color: #f6f7f7;;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  .pds{
    padding: 20rpx 0;
  }
  }
}

  
</style>